<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>

		<!-- 引入样式文件 -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css"> -->
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script> -->
		<link rel="stylesheet" href="../css/vant.css">
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="../js/vue.js"></script>
		<script src="../js/vant.min.js"></script>

	</head>

	<body>
		<div id="app" style="background-color: #f1f5f8">
			<div style="padding: 10px;display: flex;">
				<div>
					<img src="../images/logo.png" style="width: 30px;height: 30px;">
				</div>
				<div style="margin-left: 10px;height: 30px; line-height: 30px;">
					Vant
				</div>
			</div>
			<div>
				<van-cell-group title="基础用法">
					<van-cell title="单元格" value="内容" />
					<van-cell title="单元格" value="内容" label="描述信息" />
				</van-cell-group>

				<van-cell-group title="单元格大小">
					<van-cell title="单元格" value="内容" size="large" />
					<van-cell title="单元格" value="内容" size="large" label="描述信息" />
				</van-cell-group>

				<van-cell-group title="展示图标">
					<van-cell title="单元格" icon="location-o" />
				</van-cell-group>

				<van-cell-group title="只设置value">
					<van-cell value="内容" />
				</van-cell-group>

				<van-cell-group title="展示箭头">
					<van-cell title="单元格" is-link />
					<van-cell title="单元格" is-link value="内容" />
					<van-cell title="单元格" is-link arrow-direction="down" value="内容" />
				</van-cell-group>

				<van-cell-group title="分组1">
					<van-cell title="单元格" value="内容" />
				</van-cell-group>
				<van-cell-group title="分组2">
					<van-cell title="单元格" value="内容" />
				</van-cell-group>
			</div>


		</div>
		<script>
			// 在 #app 标签下渲染一个按钮组件
			new Vue({
				el: '#app',

				data: {

				},

				methods: {

				},

				created() {

				},
				//template: '<van-button type="danger">默认按钮</van-button>'
				//template: `<van-cell title="单元格" value="内容" size="large" />`
			});
			// 调用函数组件，弹出一个 Toast
			//vant.Toast('提示');
		</script>
	</body>

</html>
